<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      class="gl_dialog_TitleLine gl_dl_footer"
      :close-on-click-modal="false"
      width="632px"
      :before-close="cancelDialog"
      @opened="opened()"
    >
      <el-scrollbar ref="scroll" wrap-class="scrollbar-wrapper">
        <div v-loading="loading" class="gl_px_20">
          <el-form ref="selectedMsg" class="gl_form_mini" :model="selectedMsg" :rules="selectedMsg_rules" label-position="top" label-width="120px" style="padding:0 30px">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="上传图片" prop="imageUrl">
                  <template>
                    <el-input v-show="false" v-model.trim="selectedMsg.imageUrl" />
                    <upload-file
                      ref="uploadFile"
                      :file-name="selectedMsg.imageUrl"
                      :action="action"
                      :show-file-list="false"
                      :limit="1"
                      file-type="file"
                      format-file=".jpg,.png,.gif"
                      :default-file-url="getStaticFileUrl(selectedMsg.imageUrl)"
                      @uploadSuccess="logoUrlPhotoCropperSave"
                    />
                    <div style="font-size:12px;color:rgba(0, 0, 0, 0.65);">支持jpg、gif、png格式，建议使用尺寸2000x400像素以上、大小不超过10M的图片</div>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="链接地址" prop="linkAddress">
                  <el-input v-model="selectedMsg.linkAddress" placeholder="请输入" type="text" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="轮播上架" prop="isOnline">
                  <el-radio-group v-model="selectedMsg.isOnline">
                    <el-radio :label="true">展示中</el-radio>
                    <el-radio :label="false">未展示</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="cancelDialog">取 消</el-button>
        <el-button v-if="isEdit" size="medium" type="primary" @click="confirmEdit">确 定</el-button>
        <el-button v-else size="medium" type="primary" @click="confirmAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from './photoUpload';
import {
  SiSTKWMallCreateBannerInput // 创建轮播图
} from '@/lib/form/shoppingmall/swaggerForm';
import {
  api_POST_MallBanner, // 创建轮播图
  api_PUT_MallBannerId
} from '@/extend/api/shoppingmallswaggerApi/app.js';
export default {
  components: {
    UploadFile
  },
  data() {
    return {
      storeId: '',
      dialogVisible: false,
      isEdit: false,
      loading: false,
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      selectedMsg: new SiSTKWMallCreateBannerInput(),
      formatFile: '.jpg,.png,.jpeg',
      selectedMsg_rules: {
        imageUrl: [{ required: true, message: '请上传图片', trigger: 'change' }]
      },
      imageUrl: ''
    };
  },
  computed: {
    title: function() {
      return this.isEdit ? '编辑轮播' : '添加轮播';
    }
  },
  methods: {
    init() {
      this.$refs.logoUrlPhotoCropper.init();
    },
    confirmEdit() {
      const that = this;
      this.selectedMsg.storeId = this.storeId;
      this.$refs.selectedMsg.validate(valid => {
        if (valid) {
          if (!that.selectedMsg.storeId) return;
          that.loading = true;
          api_PUT_MallBannerId(that.selectedMsg.id, that.selectedMsg).then(res => {
            that.loading = false;
            if (res) {
              that.dialogVisible = false;
              that.$message({ type: 'success', message: '更新成功' });
              that.selectedMsg = new SiSTKWMallCreateBannerInput();
              that.$parent.getPageList();
            }
          }, error => {
            that.loading = false;
            const _msg = error.error.message || error.message;
            that.$message({ type: 'error', message: _msg });
          });
        } else {
          that.$refs.scroll.wrap.scrollTop = 0;
          that.dialogVisible = true;
          return false;
        }
      });
    },
    confirmAdd() {
      const that = this;
      this.selectedMsg.storeId = this.storeId;
      this.$refs.selectedMsg.validate(valid => {
        if (valid) {
          if (!that.selectedMsg.storeId) return;
          that.loading = true;
          api_POST_MallBanner(that.selectedMsg).then(res => {
            that.loading = false;
            if (res) {
              that.dialogVisible = false;
              that.$message({ type: 'success', message: '创建成功' });
              that.$refs.uploadFile.imageUrl = '';
              that.selectedMsg = new SiSTKWMallCreateBannerInput();
              that.$parent.getPageList();
            }
          }, error => {
            that.loading = false;
            const _msg = error.error.message || error.message;
            that.$message({ type: 'error', message: _msg });
          });
        } else {
          that.$refs.scroll.wrap.scrollTop = 0;
          that.dialogVisible = true;
          return false;
        }
      });
    },
    cancelDialog() {
      this.dialogVisible = false;
      this.$refs.uploadFile.imageUrl = '';
      this.selectedMsg = new SiSTKWMallCreateBannerInput();
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    openPhotoCropper(code) {
      this.$refs['uploadFile'].open(this.selectedMsg[code]);
    },
    // 图片回显
    logoUrlPhotoCropperSave(fileUrl) {
      this.$set(this.selectedMsg, 'imageUrl', fileUrl.tempUrl);
      this.$refs.uploadFile.imageUrl = fileUrl.tempUrl;
    },
    opened() {
      this.loading = true;
      this.$refs.uploadFile.imageUrl = this.selectedMsg.imageUrl;
      this.loading = false;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
